<template>
  <div class="index-page">
    <div class="banner">
      <router-link
        to="/"
        class="quit"
      >退出</router-link>
      <div class="logo"><img
          src="../include/img/logo.png"
          alt=""
        ></div>
    </div>
    <div class="list">
      <ul>
        <li
          v-for="(item, index) in items"
          :key="index"
          @click="tabItem(index)"
        >
          <div class="view">
            <i><img
                :src="item.src"
                alt=""
              ></i>{{item.text}}
          </div>
        </li>
      </ul>
    </div>
    <pageFoot footIndex="4"></pageFoot>
  </div>
</template>

<script>
import pageFoot from '@/components/include/footer'
export default {
  components: { pageFoot },
  data () {
    return {
      items: [
        {
          text: '个人信息',
          src: require('../include/img/user_ico1.png')
        },
        {
          text: '团队中心',
          src: require('../include/img/user_ico2.png')
        },
        {
          text: '交易明细',
          src: require('../include/img/user_ico3.png')
        },
        {
          text: '奖金明细',
          src: require('../include/img/user_ico4.png')
        },
        {
          text: '修改密码',
          src: require('../include/img/user_ico5.png')
        },
        {
          text: '推广链接',
          src: require('../include/img/user_ico6.png')
        },
        {
          text: '数字资产',
          src: require('../include/img/user_ico7.png')
        }
      ]
    }
  },
  mounted: function () {},
  methods: {
    tabItem: function (e) {
      if (e === 0) {
        this.$router.push({
          path: 'user/user_info'
        })
      } else if (e === 2) {
        this.$router.push({
          path: 'user/transaction'
        })
      } else if (e === 3) {
        this.$router.push({
          path: 'user/bonus'
        })
      } else if (e === 4) {
        this.$router.push({
          path: 'user/modificationItem'
        })
      } else if (e === 5) {
        this.$router.push({
          path: 'user/spread'
        })
      } else if (e === 6) {
        this.$router.push({
          path: 'user/asset'
        })
      } else {
        this.$toast({
          message: '敬请期待！'
        })
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.index-page {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  .logo {
    width: 2.14rem;
    position: absolute;
    left: 50%;
    top: 1.05rem;
    margin-left: -1.07rem;
  }
  .banner {
    height: 5.06rem;
    background: url("../include/img/banner.png") no-repeat center;
    background-size: 100%;
    position: relative;
    .quit {
      font-size: 0.3rem;
      color: #ffffff;
      position: absolute;
      right: 0.3rem;
      top: 0.5rem;
    }
  }
  .list {
    margin-bottom: 1.5rem;
    li {
      border-bottom: solid 0.01rem #e5e5e5;
      .view {
        width: 6.9rem;
        margin-left: auto;
        margin-right: auto;
        height: 1.2rem;
        line-height: 1.2rem;
        font-size: 0.3rem;
        color: #313131;
        background: url("../include/img/select_right.png") no-repeat right
          center;
        background-size: 0.19rem 0.37rem;
        i {
          width: 0.36rem;
          display: inline-block;
          vertical-align: middle;
          margin-right: 0.35rem;
        }
      }
    }
  }
  .btn {
    font-size: 0.3rem;
    color: #ffffff;
    text-align: center;
    width: 6rem;
    margin-left: auto;
    margin-right: auto;
    height: 0.8rem;
    line-height: 0.8rem;
    background: #0192dd;
    border-radius: 0.5rem;
    margin-top: 0.6rem;
    cursor: pointer;
  }
}
</style>
